import React, {Component} from 'react';
import {Map} from 'immutable';
import {Form, Cascader, Input} from 'antd';
const FormItem = Form.Item;
import className from 'classnames';

import options from 'constant/cascader-address-options';


class Receipt extends Component {
    static defaultProps = {
        receipt: Map(),
        type: 1//0:代客下单

    }

    render() {
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 16},
        };

        const {form:{getFieldDecorator}, receipt, type} = this.props;

        const receiptIdField = getFieldDecorator('receiptId', {
            initialValue: receipt.get('receiptId')
        })(<Input type="hidden"/>)

        const cascaderField = getFieldDecorator('cascader', {
            initialValue: receipt.get('province') ? [receipt.get('province'), receipt.get('city'), receipt.get('area')] : [],
            rules: [
                {
                    required: true, message: '请补充地址信息'
                }
            ]

        })(
            <Cascader options={options} placeholder="请选择地区信息"/>
        );

        const detailAddressField = getFieldDecorator('detailAddress', {
            initialValue: receipt.get('detailAddress'),
            validateTrigger: 'onBlur',
            rules: [
                {
                    required: true, message: '1-30个字', transform: (value)=>!!value && value.trim()
                }
            ]
        })(
            <Input className="w300" maxLength="30"/>
        );

        const postCodeField = getFieldDecorator('mailCode', {
            initialValue: receipt.get('postcode'),
            validateTrigger: 'onBlur',
            rules: [
                {
                    pattern: /^[1-9]\d{5}$/, message: '6位数字'
                }
            ]
        })(
            <Input className="w300"/>
        );

        const receiptNameField = getFieldDecorator('consigneeName', {
            initialValue: receipt.get('receiptUserName'),
            validateTrigger: 'onBlur',
            rules: [
                {
                    required: true, message: '1-10个字', transform: (value)=>!!value && value.trim()
                }
            ]
        })(
            <Input className="w300" maxLength="10"/>
        );

        const mobilePhone = getFieldDecorator('mobilePhone', {
            initialValue: receipt.get('mobilePhone'),
            validateTrigger: 'onBlur',
            rules: [
                {
                    required: true, message: '请输入手机号码', transform: (value)=>!!value && value.trim()
                },
                {
                    pattern: /^1\d{10}$/, message: '请输入正确的手机格式', transform: (value)=>!!value && value.trim()
                }
            ]
        })(
            <Input className="w300"/>
        );

        const fixPhone = getFieldDecorator('fixPhone', {
            initialValue: receipt.get('fixPhone'),
            rules: [
                {
                    pattern: /^(\d{3,4}-)?\d{7,8}(-\d{1,6})?$/, message: '请输入正确的固话号码'
                }
            ]
        })(
            <Input className="w300"/>
        );

        const classState = className("pusht p20", {"bdt": !!type})

        return (
            <Form className={classState}>
                <FormItem {...formItemLayout}
                          label="所在地区"
                          required><div className="inline-blk w300">{cascaderField}</div></FormItem>
                <FormItem {...formItemLayout}
                          label="详细地址"
                          required>{detailAddressField}</FormItem>
                <FormItem {...formItemLayout}
                          label="收货人"
                          required>{receiptNameField}</FormItem>
                <FormItem {...formItemLayout}
                          label="手机号码"
                          required>{mobilePhone}</FormItem>
                <FormItem {...formItemLayout}
                          label="固定号码">{fixPhone}</FormItem>
                <FormItem {...formItemLayout}
                          label="邮政编码">{postCodeField}</FormItem>
                <FormItem>{receiptIdField}</FormItem>

            </Form>
        )
    }


    onOk() {
        this.props.form.validateFields((errors, values)=>{
            if (!errors) {
                this.props.onOk(values);
            }
        })
    }
}

export default Form.create()(Receipt);